<template>
    <el-container>
      <el-header class="header">浙深供应链劳务派遣</el-header>
      <el-container class="content">
        <el-aside class="aside" width="180">
         <ul>
           <li @click="btn1data(1)" :class="showmode == 1 ? 'active' : ''">
            <router-link tag="li" to="/Index">
              <img v-if="showmode==1" src="../assets/img/sy.png" alt="">
              <img v-else src="../assets/img/sy2.png" alt="">
              主页
            </router-link>
          </li>
           <li @click="btn1data(2)" :class="showmode == 2? 'active' : ''">
            <router-link tag="li" to="/Staff">
              <img v-if="showmode==2" src="../assets/img/yg.png" alt="">
              <img v-else src="../assets/img/yg2.png" alt="">
              员工
            </router-link>
          </li>
           <li @click="btn1data(3)" :class="showmode == 3? 'active' : ''">
             <router-link tag="li" to="/Examine">
              <img v-if="showmode==3" src="../assets/img/ts.png" alt="">
              <img v-else src="../assets/img/ts2.png" alt="">
              提现审核
              <span class="num" v-if="show">{{this.num}}</span>
             </router-link>
             
           </li>
         </ul>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      showmode:1,
      // showmode2:false,
      // showmode3:false,
      num:'',
      show:false
    }
  },
  created(){
    this.number()
    if(localStorage.getItem('showmode')){
      this.showmode=localStorage.getItem('showmode')
    }
  },
  methods:{
     //体现数字
     number(){
          this.$axios({
              method: 'post',
              url: '/laowuUser/withdrawalNotReviewedCount'
          }).then(res => {
              console.log(res.data);
              this.num = res.data.data
              if(this.num){
                this.show = true
              }
          }, err => {
              console.log(err);
          })
      },
      btn1data(e){
        this.showmode = e
        localStorage.setItem('showmode',e)
      },
    // btn1data(){
    //   this.showmode1 = true
    //   this.showmode2 = false
    //   this.showmode3 = false
    // },
    // btn2data(){
    //   this.showmode2 = true
    //   this.showmode1 = false
    //   this.showmode3 = false
    // },
    // btn3data(){
    //   this.showmode3 = true
    //   this.showmode1 = false
    //   this.showmode2 = false
    // }
  },
  destroyed() {
    localStorage.removeItem('showmode')
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  /* width:180px; */
  list-style-type: none;
  padding: 0;
}
li {
  /* display: inline-block; */
  width: 180px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  /* background: #24374A; */
  display: block;
  /* margin: 0 10px; */
  margin: 0;
  display: flex;
  align-items: center;
}
li img{
  width: 14px;
  height: 14px;
  margin-left: 24px;
  margin-right: 10px;
}

a {
  color: #42b983;
}
.el-el-container{
  min-height: 100vh;
}
.header{
  height: 50px;
  background: #108EE9;
  font-size: 20px;
  font-family: STHeitiSC-Medium, STHeitiSC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 50px;
}

.el-aside{
  width: 180px;
  /* height: 650px; */
  height: 100vh;
  background: #34495E;
  font-size: 16px;
  font-family: STHeitiSC-Light, STHeitiSC;
  font-weight: 300;
  color: #95A5A6;
  text-align: center;
  /* line-height: 16px; */
}
.el-main{
  padding:30px;
  background: #F0F2F5;
}
.num{
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #FF4444;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 16px;
  text-align: center;
  margin-left: 20px;
}
.active{
  color: #fff;
  background: #24374A;
}
</style>
